<template>
  <div class="document">
    <div class="document-body">
      <div id="关于制作源" :style="{ height: '300px' }">1</div>
      <div id="什么是XPATH" :style="{ height: '300px' }">2</div>
      <div id="什么是JSONPATH" :style="{ height: '300px' }">3</div>
      <div id="规则字段介绍" :style="{ height: '300px' }">4</div>
      <div id="基础字段" :style="{ height: '300px' }">5</div>
    </div>
    <div :id="`${path}#default`" class="document-nav">
      <nav class="document-nav__body">
        <t-anchor>
          <t-anchor-item :href="`${path}#关于制作源`" title="关于制作源" />
          <t-anchor-item href="#什么是XPATH" title="什么是XPATH" />
          <t-anchor-item title="什么是JSONPATH" @click="onAnchor('#什么是JSONPATH')" />
          <t-anchor-item href="#规则字段介绍" title="规则字段介绍">
            <t-anchor-item href="#基础字段" title="基础字段" />
            <t-anchor-item href="#搜索字段" title="搜索字段" />
          </t-anchor-item>
        </t-anchor>
      </nav>
    </div>
  </div>
</template>
<script setup lang="ts">
import get from 'lodash/get';
import { computed, getCurrentInstance } from 'vue';

import router from '@/router';

const { appContext } = getCurrentInstance() || {};
const path = computed(() => get(appContext, '$route.path', ''));
console.log(path);

const onAnchor = (v: any) => {
  router.push({ path: '/document/index', hash: v });
}
</script>

<style lang="less" scoped>
.document {
  display: flex;
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-medium);

  &-body {
    flex: 1;
  }

  &-nav {
    position: relative;
    width: 200px;

    &__body {
      position: fixed;
      margin-top: var(--td-comp-margin-xxxxl);
    }
  }
}
</style>
